<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript</title>

    <script>function myFunction() {
        document.getElementById("demo4").innerHTML = "段落已被更改。";
    }
    </script>
</head>
<body>
<h1>javascript的功能</h1>

<h2>在节点中使用js</h2>

<p id = "demo">javascript能够改变HTML的内容</p>

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello world'">点击该按钮</button><br>
<!--使用getElementById方法来“查找” id="demo" 的 HTML 元素，并把元素内容（innerHTML）更改为 "Hello JavaScript";-->
<!--更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。-->

<button onclick="document.getElementById('myImage').src='https://www.w3school.com.cn/i/eg_bulbon.gif'">开灯</button>

<img id="myImage" border="0" src="https://www.w3school.com.cn/i/eg_bulboff.gif" style="text-align:center;">
<!--通过改变 <img> 标签的 src 属性（source）来改变一张 HTML 图像-->
<button onclick="document.getElementById('myImage').src='https://www.w3school.com.cn/i/eg_bulboff.gif'">关灯</button>

<p id="demo1">JavaScript 能够改变 HTML 元素的样式(css)。</p>

<button type="button" onclick="document.getElementById('demo1').style.fontSize='35px'">
    放大字体
</button>

<button type="button" onclick="document.getElementById('demo1').style.fontSize='5px'">
    缩小字体
</button>

<p id="demo2">JavaScript 能够隐藏 HTML 元素。</p>

<button type="button" onclick="document.getElementById('demo2').style.display='none'">
   隐藏
</button>

<button type="button" onclick="document.getElementById('demo2').style.display='block'">
   显示
</button>

<h2>在script节点中使用js</h2>

<p id = "demo3"></p>

<script>
    document.getElementById('demo3').innerHTML = "在script节点中使用js"
</script>

<p id="demo4">第一个段落。</p>

<button type="button" onclick="myFunction()">change</button>

<!--<script>function myFunction() {-->
    <!--document.getElementById("demo4").innerHTML = "段落已被更改。";-->
<!--}-->
<!--</script>也可以在body中使用script-->

<p id="demo5">第二个段落。</p>

<button type="button" onclick="myFunction1()">change</button>

<p>（myFunction1 存储在名为 "myScript.js" 的外部文件中。）</p>

<script src="D:/demo/src/main/java/com/example/demo/day0313/myScript.js"></script>

<p>js可以通过innerHTML， document.write()，window.alert()，使用 console.log()来显示数据</p>

<button type="button" onclick="document.write(5 + 6)" >显示</button>

<!--<script>-->
    <!--window.alert(5 + 6);&lt;!&ndash;使用警告框来显示数据：&ndash;&gt;-->
<!--</script>-->

<script>
    console.log(5 + 6);
</script><!--通过浏览器控制台来显示数据-->

<p id="demo6"></p>

<script>
    var x = myFunction(7, 8);
    document.getElementById("demo6").innerHTML = x;

    function myFunction(a, b) {
        return a * b;
    }
</script>

<h2>JavaScript 函数</h2>

<p>调用函数把华氏度转换为摄氏度：</p>

<p id="demo7"></p>

<script>
    function toCelsius(f) {
        return (5/9) * (f-32);
    }
    document.getElementById("demo7").innerHTML ="温度是：" + toCelsius(86) +" 摄氏度。";<!--访问没有 () 的函数将返回函数定义-->
</script>

<p id="demo8"></p>

<p id="demo9"></p>

<script>
    myFunction();

    function myFunction() {
        var carName = "Volvo";
        document.getElementById("demo8").innerHTML =
            typeof carName + " " + carName;
    }

    document.getElementById("demo9").innerHTML =
        typeof carName;<!--myFunction() 之外的 carName 未定义。由于局部变量只能被其函数识别，因此可以在不同函数中使用相同名称的变量。-->
</script>

<script>
    function validateForm() {
        var x = document.forms["myForm"]["fname"].value;
        if (x == "") {
            alert("必须填写姓名！");
            return false;
        }
    }
</script>

<p id="demo10"></p>

<script>
    // 创建对象：
    var person = {
        firstName: "Bill",
        lastName : "Gates",
        id       :  12345
    };

    // 显示对象中的数据：
    document.getElementById("demo10").innerHTML =
        person.firstName + " " + person.lastName;
</script><!--可以直接使用对象点属性的方式访问属性-->

<p id="demo11"></p>
<script>
    // 创建对象：
    var person = {
        firstName: "Bill",
        lastName : "Gates",
        id       :  12345
    };

    // 显示对象中的数据：
    document.getElementById("demo11").innerHTML =
        person["firstName"] + " " + person["lastName"];
</script><!--或者使用person["lastName"]的方式访问-->

<p id="demo12"></p>
<script>
    // 创建对象：
    var person = {
        firstName: "Bill",
        lastName : "Gates",
        id       : 12345,
        fullName : function() {
            return this.firstName + " " + this.lastName;
        }
    };

    // 显示对象中的数据：
    document.getElementById("demo12").innerHTML = person.fullName();
</script><!--可以直接通过name = person.fullName();访问方法-->

<form name="myForm" action="/demo/action_page.php" onsubmit="return validateForm()" method="post">
    姓名：<input type="text" name="fname">
    <input type="submit" value="提交">
</form><!--如果某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交出去：-->

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

<p id="demo13"></p>

<script>
    function myFunction() {
        var x, text;

        // 获取 id="numb" 的输入字段的值
        x = document.getElementById("numb").value;

        // 如果 x 不是数字或小于 1 或大于 10
        if (isNaN(x) || x < 1 || x > 10) {
            text = "输入无效";
        } else {
            text = "输入有效";
        }
        document.getElementById("demo13").innerHTML = text;
    }
</script>



<input id="id1" type="number" min="100" max="300" required>

<button onclick="myFunction()">提交</button>


<p id="demo14"></p>

<script>
    function myFunction() {
        var inpObj = document.getElementById("id1");
        if (!inpObj.checkValidity()) {
            document.getElementById("demo14").innerHTML = inpObj.validationMessage;
        } else {
            document.getElementById("demo14").innerHTML = "输入有效";
        }
    }<!--如果输入字段包含无效的数据，显示一条消息-->

</script>

<input id="id2" type="number" max="100">

<button onclick="myFunction()">提交</button>

<p id="demo15"></p>

<script>
    function myFunction() {
        var txt = "";
        if (document.getElementById("id2").validity.rangeOverflow) {
            txt = "值太大";
        } else {
            txt = "输入有效";
        }
        document.getElementById("demo15").innerHTML = txt;
    }<!--如果数字大于 100（输入的 max 属性），将显示错误消息。-->
</script>


<input id="id3" type="number" min="100">

<button onclick="myFunction()">提交</button>



<p id="demo16"></p>

<script>
    function myFunction() {
        var txt = "";
        if (document.getElementById("id3").validity.rangeUnderflow) {
            txt = "值太小";
        } else {
            txt = "输入有效";
        }
        document.getElementById("demo16").innerHTML = txt;
    }<!--如果数字小于100（输入的 min 属性），将显示错误消息。-->
</script></body>
</html>